<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加公告</title>
    <base th:href="${#httpServletRequest.getContextPath()} + '/'">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" href="../../../layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script th:src="@{layui/layui.js}" src="../../../layui/layui.js"></script>
    <link rel="stylesheet" th:href="@{css/welcome.css}" href="../../../css/welcome.css">
</head>
<body>

<div class="layui-form-item">
    <label class="layui-form-label">标题</label>
    <div class="layui-input-block" style="margin-right: 50px">
        <label>
            <input type="text" name="name" id="name" placeholder="请输入标题"
                   autocomplete="off" class="layui-input">
        </label>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">主题</label>
    <div class="layui-input-block" style="margin-right: 50px">
        <label>
            <input type="text" name="title" id="title" placeholder="请输入主题"
                   autocomplete="off" class="layui-input">
        </label>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-block" style="margin-right: 50px">
        <label>
            <input type="text" name="remark" id="remark" placeholder="请输入备注"
                   autocomplete="off" class="layui-input">
        </label>
    </div>
</div>
<div id="text"></div>
<button type="button" class="layui-btn" id="summit" style="float: right;margin-top: 20px;margin-right: 20px">发布</button>

<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
<script type="text/javascript">
    const E = window.wangEditor;
    const editor = new E('#text');
    editor.create();

    const $ = layui.$;

    $('#summit').click(function () {
        const reg = /^[\s\S]*.*[^\s][\s\S]*$/;
        const name = $('#name').val();
        if (!reg.test(name)) {
            layer.msg("标题不能为空!", {
                icon: 0,
                offset: "auto",
                time: 2000
            });
            return;
        }
        const title = $('#title').val();
        if (!reg.test(title)) {
            layer.msg("主题不能为空!", {
                icon: 0,
                offset: "auto",
                time: 2000
            });
            return;
        }
        const content = editor.txt.html();
        if (!reg.test(content)) {
            layer.msg("内容不能为空!", {
                icon: 0,
                offset: "auto",
                time: 2000
            });
            return;
        }
        const remark = $('#remark').val();
        const data = {
            name: name,
            title: title,
            remark: remark,
            content: content
        }
        $.ajax({
            url: "notice/add",
            type: "post",
            contentType: "application/json;charset=utf8",
            data: JSON.stringify(data),
            dataType: "json",
            success: function (response) {
                let code = response.code;
                if (code == 0) {
                    layer.msg("发布成功!", {icon: 1, offset: "auto", time: 3000});
                    setTimeout(function () {
                        let index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                        parent.layer.close(index);
                    }, 3000);
                } else {
                    layer.msg("发布失败! " + response.code + " " + response.msg, {
                        icon: 0,
                        offset: "auto",
                        time: 2000
                    });
                }
            },
            error: function (response) {
                layer.msg("发布失败! " + response.status + " " + response.statusText, {
                    icon: 0,
                    offset: "auto",
                    time: 2000
                });
            }
        })
    })
</script>
</body>
</html>